<template>
    <div class="query-form flex">
        <div class="form-item">
            <div class="label">维修结算单名称</div>
            <div class="form-input">
                <i-input v-model="queryParams.originalXLSXName" placeholder="输入维修结算单关键字"></i-input>
            </div>
        </div>
        <div class="form-item">
            <div class="label">上传日期</div>
            <div class="form-input flex date">
                <div class="input-box">
                    <DatePicker type="date" v-model="queryParams.uploadStartDate" placeholder="开始日期" style="width: 100%"></DatePicker>
                </div>
                <div class="input-box">
                    <DatePicker type="date" v-model="queryParams.uploadEndDate" placeholder="结束日期" style="width: 100%"></DatePicker>
                </div>
            </div>
        </div>
        <div class="form-item" v-if="showFinish">
            <div class="label">标准化完成日期</div>
            <div class="form-input flex date">
                <div class="input-box">
                    <DatePicker type="date" v-model="queryParams.finishStartDate" placeholder="开始日期" style="width: 100%"></DatePicker>
                </div>
                <div class="input-box">
                    <DatePicker type="date" v-model="queryParams.finishEndDate" placeholder="结束日期" style="width: 100%"></DatePicker>
                </div>
            </div>
        </div>
        <div class="form-item">
            <div class="label"></div>
            <div class="form-input">
                <i-button type="primary">筛选</i-button>
                <i-button>重置</i-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            showFinish: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                queryParams: {
                    originalXLSXName: '',
                    uploadStartDate: '',
                    uploadEndDate: '',
                    finishStartDate: '',
                    finishEndDate: ''
                }
            }
        },
        mounted(){

        },
        methods: {

        }
    }
</script>


<style lang="less">
    .query-form{
        padding: 30px;
        .form-item{
            width: 25%;
            padding-right: 30px;
            .label{
                color: @color-Content;
                font-size: 14px;
                height: 20px;
                margin-bottom: 10px;
            }
            .ivu-input{
                height: 36px !important; 
                border-radius: 3px;
            }
            .date{
                justify-content: space-between;
                .input-box{
                    width: 48%;
                    .ivu-input-icon{
                        line-height: 34px;
                    }
                }
            }
            .form-input{
                .ivu-btn{
                    width: 80px;
                    height: 36px;
                    line-height: 1;
                    border-radius: 3px;
                    text-align: center;
                    font-size: 14px;
                    // margin: 0 5px;
                    margin-right: 10px;
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
    }
</style>

